<template>
  <div :class="' swiper home-swiper swipers'+swipers.length">
    <el-carousel :interval="5000" arrow="always" height="580px">
      <el-carousel-item class="home-swiper-item cursor"

       v-if="i.resourceUrl" v-for="i in swipers"
       :style="'background-image:url('+URL.PIC+i.resourceUrl+')'"
      @click.native="routeToPath(i.target.params?i.target.params.name:'', 'new')"
       ></el-carousel-item>
    </el-carousel>
    <div class="swiper-bg">
      <img src="@/assets/images/home/swiper-bg.png">
    </div>

    <div class="home-classify" @mouseout="classifyLeftOut()">
      <div class="hung-tab-wrap cursor" @click="routeToOut(URL.oldSiteIndex, 'new')">
        <div class="hung-line"></div>
        <div class="hung-enter-text">进入推广版</div>
      </div>
<!--      <div class="classify-left">-->
<!--        <ul>-->
<!--          <li class="classify-item" v-for="(item, idx) in classifys" :key="idx" @mouseover="classifyOver(item, idx)" @mouseout="classifyOut(item, idx)">-->
<!--            <div class="category-title">-->
<!--              <span v-for="categoryTitle in item">-->
<!--              <a :href="clickClassifyList(categoryTitle.title, categoryTitle)" target="_blank">{{ categoryTitle.title }}</a>-->
<!--            </span>-->
<!--            </div>-->
<!--            <div class="category-subtitle">-->
<!--              <div v-for="categoryTitle in item">-->
<!--                <span v-for="categorySubtitle in categoryTitle.frontAppDTO">-->
<!--                <a :href="clickClassifyList(categorySubtitle.title, categorySubtitle)" target="_blank">-->
<!--                  {{ categorySubtitle.title }}-->
<!--                </a>-->
<!--              </span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--        </ul>-->
<!--        <div class="pop-classify" v-show="showClassify" @mouseover="classifyOver('no', classifyIndex)" @mouseout="classifyOut('no', classifyIndex)">-->
<!--          <div class="pop-classify-wrap">-->
<!--            <div v-for="(item, idx) in classIdx">-->
<!--              <div class="pop-title">-->
<!--                <a :href="clickClassifyList(item.title, item)" target="_blank">-->
<!--                  {{ item.title }}-->
<!--                </a>-->
<!--              </div>-->
<!--              <div class="pop-tags">-->
<!--                <span v-for="front in item.frontAppDTO">-->
<!--                  <a :href="clickClassifyList(front.title, front)" target="_blank">-->
<!--                    {{ front.title }}-->
<!--                  </a>-->
<!--                </span>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="indexClassifyImg">-->
<!--              <div v-if="classifyIndex == 0">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs1">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 1">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs2">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 2">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs3">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 3">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs4">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 4">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs5">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 5">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs6">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-if="classifyIndex == 6">-->
<!--                <div @click="routeToPath(i.url,'mallplus', 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs7">-->
<!--                  <img :src="i.pic" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->


<!--        </div>-->
<!--      </div>-->
      <div class="classify-left">
        <ul>
          <li class="classify-item" v-for="(item, idx) in classifys"  v-if="idx<11" :key="idx" @mouseover="classifyOver(item, idx,true)" @mouseout="classifyOut(item, idx,true)">
            <div class="category-title" >
              <span v-for="categoryTitle in item">
              <a v-if="categoryTitle.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+categoryTitle.target.params.categoryIds+'&categoryNames='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
              <a v-else :href="URL.mall+'/search/product?kw='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
            </span>
            </div>
          </li>
          <li class="classify-item" v-if="classifys.length==12" :key="11" @mouseover="classifyOver(classifys[11], 11,true)" @mouseout="classifyOut(classifys[11], 11,true)">
            <div class="category-title" >
              <span v-for="categoryTitle in classifys[11]">
              <a v-if="categoryTitle.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+categoryTitle.target.params.categoryIds+'&categoryNames='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
              <a v-else :href="URL.mall+'/search/product?kw='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
            </span>
            </div>
          </li>
          <li v-if="classifys.length>12" class="classify-item" @mouseover="classifyOver(classifys, 12,false)" @mouseout="classifyOut(classifys, 12,false)">
            <div class="category-title" >
              <span>
                  <a :href="clickClassifyList('其他分类', null)" target="_blank">其他分类</a>
              </span>
            </div>
          </li>
        </ul>
        <div class="pop-classify" v-show="showClassify" @mouseover="classifyOver('no', classifyIndex)" @mouseout="classifyOut('no', classifyIndex)">
          <div class="pop-classify-wrap">
            <div v-for="(item, idx) in classIdx" class="pop-class-content">
              <div class="pop-title">
                <a v-if="item.target && item.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+item.target.params.categoryIds+'&categoryNames='+item.title" target="_blank">{{ item.title }}</a>
                <a v-else :href="URL.mall+'/search/product?kw='+item.title" target="_blank">{{ item.title }}</a>
              </div>
              <div class="pop-tags">
                <span v-for="front in item.frontAppDTO">
                  <a v-if="item.target && front.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+front.target.params.categoryIds+'&categoryNames='+front.title" target="_blank">{{ front.title }}</a>
                  <a v-else :href="URL.mall+'/search/product?kw='+front.title" target="_blank">{{ front.title }}</a>
                </span>
              </div>
            </div>

            <div class="indexClassifyImg">
              <div v-if="classifyIndex == 0">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs1">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 1">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs2">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 2">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs3">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 3">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs4">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 4">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs5">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 5">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs6">
                  <img :src="i.pic" alt="">
                </div>
              </div>
              <div v-if="classifyIndex == 6">
                <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs7">
                  <img :src="i.pic" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="classify-pop">

      </div>
    </div>
  </div>
</template>

<script>
import { getPicList, getClassifys } from '@/api/home'
import indexClassifyImg from '@/jsons/index-classify-img'
export default {
  data() {
    return {
      swipers: [],
      showClassify: false,
      classifys: [],
      classIdx: 0,
      classifyIndex: 0,
      indexClassifyImg: indexClassifyImg,
    }
  },
  created() {
    this.getPicList()
    // if(getsessionStorage('classify')){
    //   this.classifys = getsessionStorage('classify')
    // }else{
    //   this.getClassifys();
    // }
    this.getClassifys()
  },
  methods: {
    // getsessionStorage(storeName){
    //   getsessionStorage(storeName)
    // },
    clickClassifyList(value, item) {
      if(item.target.code == 'search_category' && item.target.params){
        var myCategoryIds = item.target.params.categoryIds.join(',')
        return this.URL.mall+'/search/product?categoryIds='+myCategoryIds+'&categoryNames='+value
      }else{
        return this.URL.mall+'/search/product?kw='+value
      }
    },
    // 鼠标移入分类
    classifyOver(item, classifyIndex,isBool) {
      this.showClassify = true;
      this.classifyIndex = classifyIndex;
      if(!isBool){
        if(item!=null && item!=undefined){
          if(item !== 'no'){
            this.classIdx = [];
            item.forEach((res,index)=>{
              if(index>11){
                res.forEach(obj=>{
                  this.classIdx.push(obj);
                });
              }
            });
          }
        }
      }else{
        if(item !== 'no'){
          this.classIdx = item;
        }
      }
    },
    classifyLeftOut() {
      // this.classifyIndex = -1
    },
    // 鼠标移出分类
    classifyOut(item, classifyIndex,isBool) {
      this.showClassify = false;
      this.classifyIndex = classifyIndex;
      if(!isBool){
        if(item!=null && item!=undefined){
          if(item !== 'no'){
            this.classIdx = [];
            item.forEach((res,index)=>{
              if(index>11){
                res.forEach(obj=>{
                  this.classIdx.push(obj);
                });
              }
            });
          }
        }
      }else{
        if(item !== 'no'){
          this.classIdx = item;
        }
      }
    },
    getPicList() {
      getPicList({
        positionCode: 'index_banner',
        device: 'pc'
      }).then(res=>{
        this.swipers = res.data;
      })
    },
    getClassifys() {
      getClassifys().then(res=>{

        for(var i = 0;i < res.data.length; i += 2){
            this.classifys.push(res.data.slice(i, i + 2));
        }
        // setTimeout(()=>{
        //   setsessionStorage('classify', this.classifys)
        // }, 10)
      })

    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper{
    position: relative;
    overflow: hidden;
    min-width: 1300px;
    .swiper-bg{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      img{
        vertical-align: bottom;
      }
    }
    .home-classify{
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -600px;
      width:200px;
      height:470px;
      background:rgba(240,240,240,1);
      box-shadow: 0 2px 26px rgba(0,0,0,0.07);
      z-index: 11;

      .classify-left{
        position: relative;
        ul{
          height: 476px;
          overflow: hidden;
        }
        .pop-classify{
          &::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
            background-color:#f8f8f8;
          }
          &::-webkit-scrollbar {//滚动条的宽度
            width:0px;
            height:9px;
          }
          &::-webkit-scrollbar-thumb {//滚动条的设置
            background-color:#dddddd;
            background-clip:padding-box;
            min-height:28px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background-color:#bbb;
          }

          position: absolute;
          top: 0px;
          left: 200px;
          width: 500px;
          height: 450px;
          padding: 10px 30px;
          background-color: #fff;
          border-radius: 0 10px 10px 0;
          z-index: 11;
          overflow-y: scroll;

          .pop-classify-wrap{
            position: relative;
            height: 100%;
            .indexClassifyImg{
              position: absolute;
              width: 460px;
              height: 100px;
              bottom: 30px;
              left: 10px;
              text-align: center;
              .indexClassifyImg-item{
                display: inline-block;
              }
              .indexClassifyImg-item:nth-child(2){
                margin-left: 40px;
              }
            }
          }

          .pop-title{
            margin-top: 5px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            a{
              color: #333;
              transition: all 0.3s;
              text-decoration: none;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              display: inline-block;
              position: relative;
              &:hover{
                color: #255B8B
              }
              &:before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30%;
                background: #95CEFF;
                opacity: 0.4;
              }
            }
          }
          .pop-tags{
            margin-top: 10px;
            span{
              display: inline-block;
              margin-right: 20px;
              line-height: 28px;
              cursor: pointer;
              font-size: 14px;
              color: #888888;
              a{
                color: #888888;
                transition: all 0.3s;
                text-decoration: none;
                &:hover{
                  color: #255B8B
                }
              }
            }
            // span:nth-child(1){
            //   margin-left: 0;
            // }
          }
        }
      }
      .classify-item:nth-child(13){margin-bottom: 14px;}
      .classify-item{
        margin-top: 5px;
        .category-title {
          border-color: #fff;
          color: #000;
          height: 34px;
          line-height: 34px;
          width: 100%;
        }
        &:hover {
          .category-title{
            background-color: #fff;
            position: relative;
            z-index: 2;
            height: 34px;
          }
        }
        .category-subtitle{
          span{
            color: #555;
          }
        }

        span{
          cursor: pointer;
        }
        .category-title{
          padding: 0 20px;
          span{
            color: #333333;
            margin-right: 10px;
            font-size: 14px;
            a{
              color: #333;
              transition: all 0.3s;
              text-decoration: none;
              font-size: 14px;
              font-family: PingFang-SC-Regular;
              font-weight: 400;
              &:hover{
                color: #255B8B
              }
            }
          }
        }
        .category-subtitle{
          margin: 0 30px;
          width: 180px;
          overflow: hidden;
          height: 20px;
          line-height: 20px;
          text-overflow: clip;
          span{
            color: #888888;
            margin-right: 10px;
            font-size: 12px;
            display: inline-block;
            a{
              color: #888888;
              transition: all 0.3s;
              text-decoration: none;
              &:hover{
                color: #255B8B
              }
            }
          }
        }
      }
      .classify-item.classify-item-active{
        background-color: #fff;
        position: relative;
        z-index: 2;
        .category-title{
          border-color: #fff;
          color: #000;
        }
        .category-subtitle{
          span{
            color: #555;
          }
        }
      }

      .pop-class-content:nth-child(n+2){
        margin-top: 30px;
      }

      .classify-item:nth-child(1) .category-title{
        border-top: none;
      }

      .hung-tab-wrap{
        position: absolute;
        top: -20px;
        left: -45px;
        z-index: 10;
        .hung-line{
          width: 1px;
          height: 20px;
          background: #255B8B;
          margin-left: 10px;
        }
        .hung-enter-text{
          width: 22px;
          height: 100px;
          background: #255B8B;
          color: #fff;
          font-size: 14px;
          padding-top: 15px;
          text-align: center;
          border-radius: 11px;
        }
      }
    }
  }


</style>

<style lang="scss">
.swiper .home-classify .classify-item{
  overflow: hidden;
}
  .home-swiper{

    .el-carousel__indicators{
      bottom: 90px;
      z-index: 3;
      .el-carousel__button{
        height: 4px;
      }
    }
    .el-carousel__arrow--left{
      left: 50%;
      margin-left: -340px;
    }
    .el-carousel__arrow{
      height: 54px;
      width: 54px;
      font-size: 22px;
    }
    .el-carousel__arrow--right{
      right: 50%;
      margin-right: -600px;
    }
    .home-swiper-item{
      background-size: cover;
      background-position: center;
    }
  }
  .swipers1 .el-carousel__indicators, .swipers1 .el-carousel__arrow{
    display: none;
  }
</style>
